<template>
  <!-- pc -->
  <div>
    <div class="PCheader">
      <div class="header ">
        <div class="logo" @click="toHome">
          <img src="../assets/logo.png" alt="">
        </div>
        <div class="searchInput">
          <div class="select" @click="showSelect = !showSelect">
            {{ tablist[tabIndex] }}
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-chevron-down">
              <path d="M6 9l6 6l6 -6"></path>
            </svg>

            <div class="morelist" v-show="showSelect">
              <div class="li" :class="index == tabIndex ? 'active' : ''" v-for="(item, index) in tablist" :key="index">{{
                item
              }}
              </div>
            </div>
          </div>
          <div class="inputs">
            <input type="text" :placeholder="$t('top.top3')" v-model="keywords" @keyup.enter="search">
            <div class="jiegang">/</div>
          </div>
          <div class="searchBtn" @click="search">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-search">
              <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
              <path d="M21 21l-6 -6"></path>
            </svg>
          </div>
        </div>
        <div class="btns">
          <div class="list" @click="toCreat">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-brush">
              <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
              <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
              <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
              <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
            </svg>
            <span>{{ $t('top.top1') }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-chevron-right">
              <path d="M9 6l6 6l-6 6"></path>
            </svg>
          </div>
          <div class="list loginBtn" @click="toLogin" v-if="!isLogin">
            {{ $t('top.top2') }}
          </div>
          <div class="userlogo" v-else>
            <img v-if="userInfo.avatar" @click="showMyMore = !showMyMore" :src="userInfo.avatar" alt="">
            <img v-if="!userInfo.avatar" @click="showMyMore = !showMyMore" src="../assets/defaultHead.png" alt="">
            <div class="flex huizhang" @click="showMyMore = !showMyMore">
              <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
              </svg> -->
              {{ userInfo.nickname ? userInfo.nickname : 'Not login' }}
            </div>

            <div class="myMore" v-if="showMyMore">
              <div class="listss" @click="toMyInfo">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="#1971c2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-user">
                  <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                </svg>
                <span>{{ $t('my.my6') }}</span>
              </div>
              <!-- <div class="listss" @click="loginOut">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="#c92a2a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-logout">
                  <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                  <path d="M9 12h12l-3 -3"></path>
                  <path d="M18 15l3 -3"></path>
                </svg>
                <span>{{ $t('my.my7') }}</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobileheader">
      <div class="searchShow" v-if="showSearch">
        <input type="text" @blur="showSearch = !showSearch" placeholder="Search Civitai">
      </div>
      <div class="logoss" @click="toHome">
        <svg class="__mantine-ref-svg mantine-mr0ie9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 22.7">
          <g class="mantine-1ct6hp1">
            <path class="__mantine-ref-c mantine-1e6wg96" d="M20.8,1.7H3.7L1.5,4.1v15l2.3,2.3h17.1v-5.2H6.7V7h14.1V1.7z">
            </path>
            <path class="__mantine-ref-ivit mantine-1e6wg96" d=""></path>
            <path class=""></path>
            <path class="" d="M46.7,16.2v5.1h-5.1"></path>
          </g>
          <g class="__mantine-ref-badge mantine-1vi89gt">
            <linearGradient id="innerGradient" gradientUnits="userSpaceOnUse" x1="10.156" y1="22.45" x2="10.156"
              y2="2.4614" gradientTransform="matrix(1 0 0 -1 0 24)">
              <stop offset="0" style="stop-color:#081692"></stop>
              <stop offset="1" style="stop-color:#1E043C"></stop>
            </linearGradient>
            <linearGradient id="outerGradient" gradientUnits="userSpaceOnUse" x1="10.156" y1="22.45" x2="10.156" y2="2.45"
              gradientTransform="matrix(1 0 0 -1 0 24)">
              <stop offset="0" style="stop-color:#1284F7"></stop>
              <stop offset="1" style="stop-color:#0A20C9"></stop>
            </linearGradient>
            <path style="fill:url(#innerGradient)" d="M1.5,6.6v10l8.7,5l8.7-5v-10l-8.7-5L1.5,6.6z"></path>
            <path style="fill:url(#outerGradient)"
              d="M10.2,4.7l5.9,3.4V15l-5.9,3.4L4.2,15V8.1 L10.2,4.7 M10.2,1.6l-8.7,5v10l8.7,5l8.7-5v-10C18.8,6.6,10.2,1.6,10.2,1.6z">
            </path>
            <path style="fill:#fff"
              d="M11.8,12.4l-1.7,1l-1.7-1v-1.9l1.7-1l1.7,1h2.1V9.3l-3.8-2.2L6.4,9.3v4.3l3.8,2.2l3.8-2.2v-1.2H11.8z">
            </path>
          </g>
        </svg>
      </div>
    
      <div class="btns">
        <div class="morebtns">
        <div class="create" @click="toCreat">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="tabler-icon tabler-icon-brush">
            <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
            <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
            <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
            <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
          </svg>
        </div>
        <div @click="showSearch = !showSearch">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="tabler-icon tabler-icon-search">
            <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
            <path d="M21 21l-6 -6"></path>
          </svg>
        </div>
      </div>
        <div class="list loginBtn" @click="toLogin" v-if="!isLogin">
          {{ $t('top.top2') }}
        </div>
        <div class="userlogo" v-else>
          <img v-if="userInfo.avatar" @click="showMyMore = !showMyMore" :src="userInfo.avatar" alt="">
          <img v-if="!userInfo.avatar" @click="showMyMore = !showMyMore" src="../assets/defaultHead.png" alt="">
          <div class="flex huizhang" @click="showMyMore = !showMyMore">
            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
              </svg> -->
            {{ userInfo.nickname ? userInfo.nickname : 'Not login' }}
          </div>

          <div class="myMore" v-if="showMyMore">
            <div class="listss" @click="toMyInfo">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="#1971c2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-user">
                <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
              </svg>
              <span>{{ $t('my.my6') }}</span>
            </div>
            <div class="listss" @click="loginOut">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="#c92a2a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-logout">
                <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                <path d="M9 12h12l-3 -3"></path>
                <path d="M18 15l3 -3"></path>
              </svg>
              <span>{{ $t('my.my7') }}</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      //tablist: [this.$t('top.top4'), this.$t('top.top5'), this.$t('top.top6'), this.$t('top.top7'), this.$t('top.top8'), this.$t('top.top9')],
      tablist: ['videos'],
      tabIndex: 0,
      keywords: '',
      showSelect: false,
      isLogin: false,
      userInfo: {},
      showSearch: false,
      showMyMore: false
    };
  },
  created() {
    if (this.$route.query.keywords) {
      this.keywords = this.$route.query.keywords;
    }
  },
  mounted() {
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      this.isLogin = localStorage.getItem('token') ? true : false
      console.log('loadUserInfo');
      let userInfo = localStorage.getItem('userInfo');
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
    },
    search() {
      const path = this.$route.path;
      console.log(path, 'path');
      if (path == '/') {
        this.$emit("search", this.keywords)
      } else {
        //this.$router.push({path:'/',query:{keywords:this.keywords}});
        this.$router.push({ path: '/' });
      }

    },
    toMyInfo() {
      this.$router.push('/My')
      this.showMyMore = false
    },
    toHome() {
      this.$router.push('/')
    },
    toCreat() {
      this.$router.push('/creatVideo')
    },
    toLogin() {
      this.$router.push('/login')
    },
    loginOut() {
      localStorage.removeItem('token')
      this.isLogin = false
      this.showMyMore = false
      // this.toLogin()
      this.$router.push('/')
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 69px;
  box-sizing: border-box;
  padding: 0 40px 0 8px;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #1a1b1e;

  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .tag {
    border-radius: 4px;
    font-weight: 600;
    line-height: 1;

    font-size: 24px;
    user-select: none;
    border: 1px solid transparent;
    background-color: rgba(47, 158, 68, 0.2);
    color: rgb(178, 242, 187);
    cursor: pointer;
    position: relative;
    z-index: 3;
    padding: 2px 4px;
    height: 30px;
    width: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;

  }

  .btns {
    display: flex;
    align-items: center;

    .list {
      display: flex;
      align-items: center;
      height: 36px;
      background-color: #1a2d3f;
      color: #9acbf0;
      border-radius: 5px;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 14px;
      font-size: 13px;
      margin-left: 10px;
      font-weight: bold;
      cursor: pointer;

      span {
        margin: 0 10px;
      }
    }

    .loginBtn {
      border: 1px solid #373A40;
      background-color: #25262b;
      color: #fefefe;
    }
  }

  .userlogo {
    margin-left: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;

    .myMore {
      position: absolute;
      background: rgb(37, 38, 43);
      border: 1px solid rgb(55, 58, 64);
      box-shadow: none;
      border-radius: 4px;
      padding: 4px;
      width: 258px;
      height: auto;
      right: -12px;
      top: 43px;
      z-index: 10000;

      .listss {
        height: 44px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 10px;
        font-size: 13px;
        color: rgb(193, 194, 197);

        svg {
          margin-right: 10px;
        }
      }

      .listss:hover {
        background-color: rgba(92, 95, 102, 0.35);
      }
    }

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .huizhang {
      font-size: 13px;
      text-decoration: none;
      box-sizing: border-box;
      display: inline-flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      width: auto;
      text-transform: uppercase;
      border-radius: 2px;
      font-weight: 700;
      letter-spacing: 0.25px;
      cursor: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      color: rgb(245, 159, 0);
    }
  }

  .searchInput {
    height: 36px;
    display: flex;
    align-items: center;

    .select {
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      width: 100px;
      background-color: #343a40;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      cursor: pointer;
      color: #c1c2c5;
      position: relative;

      .morelist {
        position: absolute;
        width: 100%;
        background-color: #25262b;
        top: 45px;
        left: 2px;
        border-radius: 5px;
        border: 1px solid #373a40;
        box-sizing: border-box;
        padding: 5px;
        z-index: 1000000;

        .li {
          height: 35px;
          display: flex;
          align-items: center;
          border-radius: 5px;
          padding-left: 10px;
          box-sizing: border-box;
        }

        .li:hover {
          background-color: #373a40;
          color: #fff;
        }

        .active {
          background-color: #1971c2;
          color: #fff;
        }

        .active:hover {
          background-color: #1971c2 !important;
          color: #fff;
        }
      }
    }

    .inputs {
      position: relative;

      input {
        box-sizing: border-box;
        font-size: 14px;
        width: 100%;
        color: rgb(193, 194, 197);
        display: block;
        text-align: left;
        min-height: 36px;
        padding-left: 12px;
        padding-right: 36px;
        border: 1px solid rgb(55, 58, 64);
        background-color: rgb(37, 38, 43);
        transition: border-color 100ms ease 0s;
        border-radius: 0px;
        width: 660px;
      }

      .jiegang {
        text-decoration: none;
        font-weight: bold;
        border: 1px solid rgb(55, 58, 64);
        border-radius: 4px;
        background-color: rgb(26, 27, 30);
        color: rgb(173, 181, 189);
        text-align: center;
        width: 24px;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      input:focus {
        outline: none;
        border-color: rgb(25, 113, 194);
      }
    }

    .searchBtn {
      box-sizing: border-box;
      border: 1px solid transparent;
      position: relative;
      height: 36px;
      min-height: 36px;
      width: 36px;
      min-width: 36px;
      border-radius: 0px 4px 4px 0px;
      padding: 0px;
      line-height: 1;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      background-color: rgb(52, 58, 64);
      color: rgb(254, 254, 254);
      cursor: pointer;
    }

    .searchBtn:hover {
      background-color: rgb(73, 80, 87);
    }
  }
}

.PCheader {
  display: block;
}

.mobileheader {
  display: none;
}



// @media screen and (max-width:768px) {
//   .PCheader {
//     display: none;
//   }

//   .mobileheader {
//     display: block;
//     height: 69px;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     box-sizing: border-box;
//     padding: 0 10px;
//     position: relative;

    
//   .btns {
//     display: flex;
//     align-items: center;

//     .list {
//       display: flex;
//       align-items: center;
//       height: 36px;
//       background-color: #1a2d3f;
//       color: #9acbf0;
//       border-radius: 5px;
//       justify-content: space-between;
//       box-sizing: border-box;
//       padding: 0 14px;
//       font-size: 13px;
//       margin-left: 10px;
//       font-weight: bold;
//       cursor: pointer;

//       span {
//         margin: 0 10px;
//       }
//     }

//     .loginBtn {
//       border: 1px solid #373A40;
//       background-color: #25262b;
//       color: #fefefe;
//     }
//   }

//   .userlogo {
//     display: flex;
//     align-items: center;
//     cursor: pointer;
//     position: relative;
//     margin-left: 15px;

//     .myMore {
//       position: absolute;
//       background: rgb(37, 38, 43);
//       border: 1px solid rgb(55, 58, 64);
//       box-shadow: none;
//       border-radius: 4px;
//       padding: 4px;
//       width: 151px;
//       height: auto;
//       right: 0;
//       top: 43px;
//       z-index: 10000;

//       .listss {
//         height: 44px;
//         display: flex;
//         align-items: center;
//         box-sizing: border-box;
//         padding-left: 10px;
//         font-size: 13px;
//         color: rgb(193, 194, 197);

//         svg {
//           margin-right: 10px;
//         }
//       }

//       .listss:hover {
//         background-color: rgba(92, 95, 102, 0.35);
//       }
//     }

//     img {
//       width: 30px;
//       height: 30px;
//       border-radius: 50%;
//       margin-right: 5px;
//     }

//     .huizhang {
//       font-size: 13px;
//       text-decoration: none;
//       box-sizing: border-box;
//       display: inline-flex;
//       -webkit-box-align: center;
//       align-items: center;
//       -webkit-box-pack: center;
//       justify-content: center;
//       width: auto;
//       text-transform: uppercase;
//       border-radius: 2px;
//       font-weight: 700;
//       letter-spacing: 0.25px;
//       cursor: inherit;
//       text-overflow: ellipsis;
//       overflow: hidden;
//       color: rgb(245, 159, 0);
//     }
//   }

//     .searchShow {
//       position: absolute;
//       width: 100%;
//       height: 100%;
//       z-index: 10;
//       background-color: #2c2e33;
//       left: 0;
//       border-bottom: 1px solid #2c6aaf;

//       input {
//         color: #fff;
//         height: 100%;
//         width: 100%;
//         padding: 0 20px;
//         background-color: #2c2e33;
//         font-size: 14px;
//       }
//     }

//     .logoss {
//       width: 45px;
//       height: 45px;

//       svg {
//         height: 45px;
//       }
//     }

//     .morebtns {
//       display: flex;
//       align-items: center;

//       .create {
//         width: 46px;
//         height: 38px;
//         background-color: rgba(25, 113, 194, 0.2);
//         color: #a5d8ff;
//         display: flex;
//         align-items: center;
//         justify-content: center;
//       }

//       div {
//         margin-left: 10px;

//       }
//     }
//   }

// }

</style>
